<template>
  <div>
    <el-row :gutter="20" v-permission="['getStatistics1,GET']">
      <template>
        <el-col :span="6" v-for="i in 4" :key="i">
          <el-skeleton style="width: 100%;" animated loading>
            <template #template>
              <el-card shadow="hover" class="border-0">
                <template #header>
                  <div class="flex justify-between">
                    <el-skeleton-item variant="text" style="width: 50%" />
                    <el-skeleton-item variant="text" style="width: 10%" />
                  </div>
                </template>
                <el-skeleton-item variant="h3" style="width: 80%" />
                <el-divider />
                <div class="flex justify-between text-sm text-gray-500">
                  <el-skeleton-item variant="text" style="width: 50%" />
                  <el-skeleton-item variant="text" style="width: 10%" />
                </div>
              </el-card>
            </template>
          </el-skeleton>
        </el-col>
      </template>

      <el-col :span="6" :offset="0" class="flex">
        <el-card shadow="hover" class="border-0 rounded mb-2" v-for="(value, key) in sliceJson" :key="key">
          <template #header>
            <div class="flex justify-between ml-2 border-0">
              <!-- <span class="text-sm">{{ item.title }}</span> -->
              <span class="text-sm">{{ key }}</span>
              <el-tag effect="light">
                统计
              </el-tag>
            </div>
          </template>
          <span class="value">
            <CountTo :value="value"></CountTo>
          </span>
          <!-- <el-divider /> -->
          <!-- <div class="flex justify-between text-sm text-gray-500">
              <span>{{ item.subTitle }}</span>
              <span>{{ item.subValue }}</span> -->
          <!-- </div> -->
        </el-card>
      </el-col>
      <el-col :span="18" :offset="0">
        <el-card shadow="hover" class="card">
          <template #header>
            <div class="flex justify-between ml-2 border-0">
              <!-- <span class="text-sm">{{ item.title }}</span> -->
              <span class="text-sm">{{ $t('访问 IP 排行榜') }}</span>
              <el-tag effect="plain" class="mr-1">
                TOP榜
              </el-tag>
            </div>
          </template>
          <!-- card body -->
          <div>
            <el-table :data="topData" stripe class="flex justify-between" v-loading="loading">
              <el-table-column label="Top" width="160px" align="center">
                <template #default="{ row }">
                  {{ row.top }}
                </template>
              </el-table-column>
              <el-table-column label="被访问IP" align="center">
                <template #default="{ row }">
                  {{ row.ip }}
                </template>
              </el-table-column>
              <el-table-column label="次数" width="200px" align="center">
                <template #default="{ row }">
                  {{ row.count }}
                </template>
              </el-table-column>
            </el-table>
            <div class="flex items-center justify-center mt-5">
              <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="handleCurrentChange" :pager-count="10" @next-click="() => {
                  handleCurrentChange
                }
                  " @prev-click="() => {
    handleCurrentChange
  }" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-5">
      <!--      实时流量-->
      <el-col :span="12" :offset="0">
        <IndexChart title="实时流量" v-permission="['getStatistics3,GET']" class="card" />
      </el-col>
      <!--      攻击类型占比-->
      <el-col :span="12" :offset="0" v-permission="['getStatistics2,GET']">
        <IndexCard title="攻击类型占比" tip="占比" class="card mb-3" />
        <!-- <IndexCard title="交易提示" tip="需要立即处理的交易订单" :btns="order" /> -->
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24" :offset="0">
        <el-card shadow="hover" class="card">
          <template #header>
            <div class="flex justify-between ml-2 border-0">
              <!-- <span class="text-sm">{{ item.title }}</span> -->
              <span class="text-sm">当前流量列表</span>
              <el-tag effect="plain" class="mr-1">
                Flow
              </el-tag>
            </div>
          </template>
          <!-- card body -->
          <el-table :data="tableData" stripe v-loading="loading">
            <el-table-column label="ID" width="50px" align="center">
              <template #default="{ row }">
                {{ row.id }}
              </template>
            </el-table-column>
            <el-table-column label="源IP" align="center">
              <template #default="{ row }">
                {{ row.src_ip }}
              </template>
            </el-table-column>
            <el-table-column label="目的IP" align="center">
              <template #default="{ row }">
                {{ row.dest_ip }}
              </template>
            </el-table-column>
            <el-table-column label="攻击类型" align="center">
              <template #default="{ row }">
                {{ row.attack_type }}
              </template>
            </el-table-column>
            <el-table-column label="源地址" width="350px" align="center">
              <template #default="{ row }">
                {{ row.resource_path }}
              </template>
            </el-table-column>
            <el-table-column label="源端口" width="100px" align="center">
              <template #default="{ row }">
                {{ row.src_port }}
              </template>
            </el-table-column>
            <el-table-column label="目的端口" width="100px" align="center">
              <template #default="{ row }">
                {{ row.dest_port }}
              </template>
            </el-table-column>
            <el-table-column label="时间" width="200px" align="center">
              <template #default="{ row }">
                {{ row.time }}
              </template>
            </el-table-column>
            <el-table-column label="协议" align="center">
              <template #default="{ row }">
                {{ row.protocol }}
              </template>
            </el-table-column>
            <el-table-column label="威胁等级" align="center">
              <template #default="{ row }">
                {{ row.threat_level }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import CountTo from '~/components/CountTo.vue'
import IndexChart from '~/components/IndexChart.vue'
import IndexCard from '~/components/IndexCard.vue'
// import {getAttackType, getIPTopData} from '../api/test'
import { getAttackType, getIPTopData } from '~/api/base'
// import { get } from "../axios1"

// 流量列表数据
const tableData = ref([])
let flowData = []
const loading = ref(false)

// XX总数数据
const countData = ref([])
let sliceJson = ref([])
getAttackType()
  // get('/%2Fhome_page/Attack_type/')
  .then(res => {
    console.log(res);
    // tableData获取逻辑
    flowData = res
    let i = 0
    let tewlfthValue

    for (const key in flowData) {
      if (i === 11) {
        tewlfthValue = flowData[key]
        break
      }
      i++
    }
    tableData.value = tewlfthValue

    // countData获取逻辑
    countData.value = flowData
    // JSON对象转换为数组
    const jsonArray = Object.entries(countData.value)
    // 使用数组的slice方法截取第八个到第十一个元素
    const sliceArray = jsonArray.slice(7, 11)
    sliceJson.value = Object.fromEntries(
      sliceArray.map(item => [item[0], item[1]])
    )
    // console.log(sliceJson.value);
  })
  .finally(() => {
    loading.value = false
  })


// 分页
const topAllData = ref([])
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)

const topData = ref([])

function handleCurrentChange(pageNum) {
  currentPage.value = pageNum
  topData.value = topAllData.value.slice((currentPage.value - 1) * 10, currentPage.value * 10)
}

// top排行榜数据
// get('/%2Fhome_page/top_ip/')
getIPTopData()
  .then(res => {
    console.log('top', res)
    topAllData.value = res.data
    total.value = topAllData.value.length  // 获取页码
    topData.value = topAllData.value.slice(0, 10)
    // topData.value = topAllData.value.slice(0,10)
    // console.log('limit',limit.value)
    // console.log("total",total.value)
  })
  .finally(() => {
    loading.value = false
  })
</script>
<style scoped>
.value {
  @apply flex text-3xl font-bold text-gray-500 justify-center pb-2;
}

.first {
  @apply flex flex-auto items-center;
}

ul li {
  @apply mb-2;
}

ul li .first .bot {
  width: 14px;
  height: 14px;
  border-radius: 7px;
  /* background: #ff0000; */
  /* color:#ff0033;
  color: #ff1932;
  color: #ff3349; */

  margin-right: 6px;
  justify-content: center;
  align-items: center;
}

#bot1 {
  background: #e60018;
}

#bot2 {
  background: #ff001b;
}

#bot3 {
  background: #ff3349;
}

#bot4 {
  background: #ff4d5f;
}

#bot5 {
  background: #ff6676;
}

ul li .first .text {
  font-family: sans-serif;
}

.card {
  border-radius: 8px;
}
</style>